/*
  学习目标：掌握props的两个特点
  1. 可以传递任意数据类型
    1.1 string  number boolean undefined  array object
    1.2 💥函数、💥JSX
  2. 单项数据流
 
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello
          // 💥
          fn={() => alert(123)}
          // 💥 JSX
          title={<i>我是一个title</i>}
          person={{ name: 'zs', age: 18 }}
          isShow={true}
          msg="hello React"
          count={100}
        ></Hello>
      </div>
    );
  }
}

class Hello extends Component {
  render() {
    const { msg, count, isShow, list, person, fn, title } = this.props;
    console.log('title  ----->  ', title);
    return isShow ? (
      <>
        {title}
        <h1>{person.name}</h1>
        <h2>{list}</h2>
        <h1>
          -我是Hello子组件 - {msg} - {count}
        </h1>

        <button onClick={fn}>点我触发fn</button>
      </>
    ) : null;
  }
}
